<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"> 

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>

	<ui:define name="content">
		 
		<h:form id="timesheetForm">
		
			<h:panelGroup style="width:100%;text-align:center;">
				<h:outputText value="MONTHLY TIMESHEETS"  styleClass="outputTextTitle" />
			</h:panelGroup>

			<p:growl id="messages" showDetail="true" />

			<h:panelGrid style="width: 100%; background-color: #FFE4C4; border: 1px solid #F5AD66;">
				<h:panelGrid columns="4"  columnClasses="employeeDetailGridCellLabel, employeeDetailGridCellText, employeeDetailGridCellLabel, employeeDetailGridCellText" cellspacing="4" >
					<h:outputLabel value="#{msg['employeeid.label']}:" />
					<h:outputLabel value="#{timesheetsBean.wamUser.employee.employeeCode}" style="color: #777777" />
					<h:outputLabel value="#{msg['department.label']}:" />
					<h:outputLabel value="#{timesheetsBean.wamUser.employee.moduleName}" style="color: #777777" />
					<h:outputLabel value="#{msg['projectname.label']}:" />
					<h:outputLabel value="#{timesheetsBean.employeeAndReporting.project}" style="color: #777777" />
					<h:outputLabel value="To be approved by:" />
					<p:selectOneMenu id="approverMenu" value="#{timesheetsBean.approverId}" styleClass="selectOneMenu168pxFixedWidth">
							<f:ajax listener="#{timesheetsBean.approverChanged}" render="@form"/>
							<f:selectItems value="#{timesheetsBean.approversMap}" />
					</p:selectOneMenu>
										
				</h:panelGrid>
			</h:panelGrid>

			<h:panelGrid columns="2" columnClasses="gridCellMiddleLeftAligned, gridCellMiddleRightAligned" style="width: 100%; margin: 6px 0;">
				<h:panelGrid columns="6" style="">					
					<h:outputLabel value="Timesheet details for " styleClass="outputTextSubTitle" />
					<p:spacer />
					<p:spacer />
					<p:menuButton id="timesheetMonths" binding="#{timesheetsBean.monthsMenuButton}" value="#{timesheetsBean.selectedMonthYear}" >
												
					</p:menuButton>				
					<p:tooltip for="timesheetMonths" hideEvent="mousedown mouseout">
						<h:outputText value="Select a month to view/edit timesheet" styleClass="tooltipOutputLabel"/>
					</p:tooltip>				
				</h:panelGrid>
				<h:panelGroup>
					<h:outputLabel value="Status: " styleClass="outputTextSubTitle" rendered="#{not timesheetsBean.TIMESHEET_NOT_FOUND}" />	
					<h:outputText value="#{timesheetsBean.timesheet.timesheetStatus}" rendered="#{not timesheetsBean.TIMESHEET_NOT_FOUND}" style="color: #f46f1B; font-weight: bold;" />
				</h:panelGroup>
			</h:panelGrid>
			
			
			<h:panelGrid rendered="#{not timesheetsBean.TIMESHEET_NOT_FOUND}" style="width: 100%; margin: 0 auto;">
		
					<p:dataTable id="create_timesheet"     
						value="#{timesheetsBean.timesheetDetails}" selectionMode="single" selection="#{timesheetsBean.selectedTimesheetDetail}" var="row" style="" sortBy="#{row.timesheetDate}" rowKey="#{row.timesheetdetailId}">
						<p:ajax event="rowSelect" listener="#{timesheetsBean.showDetailActivityDialog}" update="@form"  />  
        				<p:ajax event="rowUnselect" listener="#{timesheetsBean.onRowUnselect}" update=":timesheetForm:growl" />  
        				 
						<p:ajax  event="rowEdit" update=":timesheetForm:growl, :timesheetForm:create_timesheet, :timesheetForm:buttonArea"  listener="#{timesheetsBean.saveTimesheetDetail}" />
						<p:column headerText="Date" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'width: 60px; background-color: #D8D8D8;' : 'width: 90px;'}" >
							<h:outputText style="width: 70px;" value="#{row.timesheetDate}" >
								<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{timesheetsBean.defaultTimeZone}"/>
							</h:outputText>					
						</p:column>
		
						<p:column headerText="Day" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'width: 60px; background-color: #D8D8D8;' : 'width: 80px;'}">
							<h:outputText  value="#{row.dayOfWeek}"/>
						</p:column>
		
						<p:column headerText="Activity" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'width: 246px; background-color: #D8D8D8;' : row.stylesMap['activity']}" >
							
							<h:outputText value="ON LEAVE (#{row.timesheetDetailStatus})" style="color: #7892B7; font-weight: bold;" rendered="#{row.timesheetDetailStatus ne null and (row.timesheetDetailStatus ne 'P' and row.timesheetDetailStatus ne 'HD')}"/>
							<h:panelGroup rendered="#{(row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P')) and timesheetsBean.IN_PROJECT}">
								<h:outputText styleClass="link" style="color: #999999;" value="Click to edit activity"  />
								<br />
							</h:panelGroup>
							<p:cellEditor rendered="#{(row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P' or row.timesheetDetailStatus eq 'HD')) and (row.activity ne 'WORKED')}">
								<f:facet name="output">
									<h:outputText value="#{row.activity}" style="#{((row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday')) and row.activity eq 'WEEK OFF' ? 'color: #7892B7; font-weight: bold;' : ''}" />
								</f:facet>
								<f:facet name="input">
									<p:inputTextarea rows="1" cols="40" maxlength="512" style="width: 180px;" value="#{row.activity}" />
								</f:facet>
							</p:cellEditor>  
							<p:dataList value="#{row.projectAssignmentTimesheetDetailList}" var="activityTable" itemType="disc" rendered="#{(row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P')) and (row.activity ne 'WEEK OFF' and (row.dayOfWeek ne 'Saturday' or row.activity ne 'Sunday')) and timesheetsBean.IN_PROJECT}" style="background-color: none;">										
								<h:outputText value="#{activityTable.employeeProject.project.projectName} (#{activityTable.timeSpent}): " />
								<br />
								<h:outputText value="#{activityTable.activity}" style="color: #999999" />
							</p:dataList>													
						</p:column>
		
						
						<p:column headerText="In Time" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'width: 60px; background-color: #D8D8D8; text-align: center' : 'width: 60px; text-align: center;'}">	
							<p:cellEditor rendered="#{(row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P' or row.timesheetDetailStatus eq 'HD'))}" >
								<f:facet name="output">
									<h:outputText  value="#{row.inTimeString}" style="width: 50px;"/>
								</f:facet>
								<f:facet name="input">
									<p:inputMask style="width: 50px;" value="#{row.inTimeString}" mask="99:99" readonly="true"/>
								</f:facet>
							</p:cellEditor>
						</p:column>
		
						<p:column headerText="Out Time" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'width: 60px; background-color: #D8D8D8; text-align: center;' : 'width: 60px; text-align: center'}">
							<p:cellEditor rendered="#{row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P' or row.timesheetDetailStatus eq 'HD')}" >
								<f:facet name="output">
									<h:outputText  value="#{row.outTimeString}" style="width: 50px;" />
								</f:facet>
								<f:facet name="input">
									<p:inputMask style="width: 50px;" value="#{row.outTimeString}" mask="99:99" readonly="true"/>							
								</f:facet>
							</p:cellEditor>

						</p:column>
		
						<p:column headerText="Hours" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday')  ? 'width: 50px; background-color: #D8D8D8; text-align: center;' : 'width: 50px; text-align: center;'}">
							<h:outputText value="#{row.duration}" rendered="#{row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P' or row.timesheetDetailStatus eq 'HD')}" />							
						</p:column>
		
						<p:column headerText="Edit" style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'width: 50px; background-color: #D8D8D8;' : 'width: 50px;'}" rendered="#{(timesheetsBean.timesheet.timesheetStatus eq 'NOT SUBMITTED' or (timesheetsBean.timesheet.timesheetStatus eq 'REJECTED'))  and not timesheetsBean.IN_PROJECT}">
							<p:rowEditor rendered="#{row.timesheetDetailStatus eq null or (row.timesheetDetailStatus eq 'P') or (row.timesheetDetailStatus eq 'HD')}" />							
						</p:column>
						<p:column style="#{(row.dayOfWeek eq 'Sunday') or (row.dayOfWeek eq 'Saturday') ? 'background-color: #D8D8D8; text-align: center;' : 'text-align: center'}">
							<p:commandButton  icon="ui-icon-mail-closed" value="Mail" oncomplete="emailConfirmationDiaglog.show()" actionListener="#{timesheetsBean.renderEmailConfirmDialog}"  disabled="#{row.activity eq null or row.activity eq '' or row.activity eq 'WEEK OFF'}" >
								<f:attribute name="selectedTimesheetDetailEmailId" value="#{row.timesheetdetailId}"></f:attribute>											
							</p:commandButton>
						</p:column>				
					</p:dataTable>				 
			</h:panelGrid>
			<h:panelGrid columns="1" style="width: 100%; text-align: right;" id="buttonArea">
					<h:panelGroup>	
						<h:outputText  value="Your timesheet was not submitted. Please fill all the activities to submit your timesheet. " styleClass="outputLabelwamInformation" rendered="#{timesheetsBean.SHOW_TIMESHEET_WARN_MESSAGE}" >
						</h:outputText>
						<p:commandButton value="Submit Timesheet" process="@form" update="@form" id="submit"  actionListener="#{timesheetsBean.submitTimesheetAction}"  rendered="#{(timesheetsBean.timesheet.timesheetStatus eq 'NOT SUBMITTED' or (timesheetsBean.timesheet.timesheetStatus eq 'REJECTED')) and (timesheetsBean.ALLOW_TO_SUBMIT)}"  />						
					</h:panelGroup>
				</h:panelGrid>
			
			<p:confirmDialog widgetVar="emailConfirmationDiaglog" id="emailConfirmationDiaglog" severity="alert" message="Do you want to send your Daily Activity as an email to #{timesheetsBean.timesheet.approver.firstName}?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Send Daily Activity"  actionListener="#{timesheetsBean.sendMail}" update="@form" onclick="emailConfirmationDiaglog.hide()" oncomplete="mailStatusDialog.show()" >
					</p:commandButton>
					<p:commandButton id="cancel" value="Cancel" onclick="emailConfirmationDiaglog.hide()" type="button" />
				</h:panelGroup>
			</p:confirmDialog>
			
			<p:dialog modal="true" widgetVar="mailStatusDialog"  
			        draggable="false" resizable="false">  
			   	<h:outputText value="Daily Activity email has been sent." />
			   	<br />
			   	<h:panelGrid style="text-align: right; float: right; width: 300px; padding: 10px 0; margin-top: 20px; border-top: 1px solid #d9d9d9">
					<p:commandButton value="Close"  onclick="mailStatusDialog.hide()" type="button" />					
				</h:panelGrid>  
			</p:dialog>
			
			<p:dialog modal="true" widgetVar="detailActivityDialog" id="detailActivityDialog" draggable="true" resizable="false" showHeader="false" >
				  
			   	<h:panelGrid columns="2" style="width: 100%; border-bottom: 1px solid #d9d9d9;" columnClasses="gridCellMiddleLeftAligned, gridCellMiddleRightAligned">
			   		<h:outputText value="Detailed Activity List" styleClass="outputTextSubTitle"/>
		   		   	<h:outputText value="#{timesheetsBean.selectedTimesheetDetail.timesheetDate}" style="color: #f46f1B">
				   		<f:convertDateTime pattern="dd-MMM-yyyy" timeZone="#{timesheetsBean.defaultTimeZone}"/>
				   	</h:outputText>				   	
			   	</h:panelGrid>
			   	<h:panelGrid style="width: 100%; padding-top: 5px;">
				   	
					<h:panelGrid columns="3" style="width: 100%" columnClasses="gridCellMiddleLeftAligned, gridCellMiddleCenterAligned, gridCellMiddleRightAligned" id="timesheetDetailPanel">
						<h:panelGroup>
							<h:outputText value="In Time:" />
							<p:spacer /><p:spacer /><p:spacer /><p:spacer />
							<p:inplace disabled="true">  
			                	<p:ajax event="save" listener="#{timesheetsBean.saveInTime}" update=":timesheetForm:growl :timesheetForm:timesheetDetailPanel" />
			                    <p:inputMask style="width: 50px;" value="#{timesheetsBean.selectedTimesheetDetail.inTimeString}" mask="99:99"/>  
			                </p:inplace>
							
						</h:panelGroup>
						<h:panelGroup>
							<h:outputText value="Out Time:" />
							<p:spacer /><p:spacer /><p:spacer /><p:spacer />
							<p:inplace disabled="true">
								<p:ajax event="save" listener="#{timesheetsBean.saveOutTime}" update=":timesheetForm:growl :timesheetForm:timesheetDetailPanel" />								
								<p:inputMask style="width: 50px;" value="#{timesheetsBean.selectedTimesheetDetail.outTimeString}" mask="99:99"/>
							</p:inplace>
						</h:panelGroup>
						<h:panelGroup>
							<h:outputText value="Duration:" />
							<p:spacer /><p:spacer /><p:spacer /><p:spacer />
							<h:outputText value="#{timesheetsBean.selectedTimesheetDetail.duration}" />
						</h:panelGroup>
					</h:panelGrid>
					<p:dataTable id="activityDetails"  value="#{timesheetsBean.projectAssignmentTimesheetDetails}" var="patd" editable="true">
						<p:column headerText="Project" style="width: 150px;" >
							<h:outputText value="#{patd.employeeProject.project.projectName}" />
						</p:column>
						<p:column headerText="Activity"  >
							<p:inputTextarea value="#{patd.activity}" maxlength="1024" style="width: 250px;" />
						</p:column>
								
						<p:column headerText="Hours"  >
							<p:inputMask style="width: 50px;" value="#{patd.timeSpent}" mask="99:99"/>							
						</p:column>					
						
					</p:dataTable>
				</h:panelGrid>
			   	<br />
			   	<h:panelGrid style="width: 100%; text-align: right; float: right; padding: 10px 0; margin-top: 20px; border-top: 1px solid #d9d9d9">
					<h:panelGroup>
						<p:commandButton value="Save" actionListener="#{timesheetsBean.updateAssignmentActivity}" update=":timesheetForm:growl" />
						<p:commandButton value="Close"  onclick="detailActivityDialog.hide()" type="button" />
					</h:panelGroup>					
				</h:panelGrid>  
			</p:dialog>
			
			<p:confirmDialog widgetVar="confirmation" id="confirmation" severity="alert" message="This will submit your timesheet. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Submit Now" actionListener="#{timesheetsBean.submitTimesheet}" update="@form" oncomplete="confirmation.hide()"/>
					<p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()" type="button" />
				</h:panelGroup>
			</p:confirmDialog>
			
			<p:growl id="growl" />
		</h:form> 
	</ui:define>
</ui:composition>

